/**
 * 小雨 + 草地 + 几多小花
 *
 * @author li.youxi
 * @date 2017/05/27
 * 
 */

import React, { Component } from 'react'
import './index.scss'

class Rain extends Component {
	render(){

		return 	<div className="back-row-toggle splat-toggle">
					<div className="rain front-row"></div>
					<div className="rain back-row"></div>
				</div>

	}

	componentDidMount(){
		$('.rain').empty();

		  var increment = 0;
		  var drops = "";
		  var backDrops = "";

		  while (increment < 100) {
		    //couple random numbers to use for various randomizations
		    //random number between 98 and 1
		    var randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
		    //random number between 5 and 2
		    var randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
		    //increment
		    increment += randoFiver;
		    //add in a new raindrop with various randomizations to certain CSS properties
		    drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
		    backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
		  }
		  
		  $('.rain.front-row').append(drops);
		  $('.rain.back-row').append(backDrops);
	}
}

export default Rain